<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    

    <title>Top Nav</title>

    <!--web fonts-->
    <link href="http://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800" rel="stylesheet">
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">

    <!--bootstrap styles-->
    <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!--icon font-->
    <link href="assets/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="assets/vendor/dashlab-icon/dashlab-icon.css" rel="stylesheet">
    <link href="assets/vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
    <link href="assets/vendor/themify-icons/css/themify-icons.css" rel="stylesheet">
    <link href="assets/vendor/weather-icons/css/weather-icons.min.css" rel="stylesheet">

    <!--custom scrollbar-->
    <link href="assets/vendor/m-custom-scrollbar/jquery.mCustomScrollbar.css" rel="stylesheet">

    <!--jquery dropdown-->
    <link href="assets/vendor/jquery-dropdown-master/jquery.dropdown.css" rel="stylesheet">

    <!--jquery ui-->
    <link href="assets/vendor/jquery-ui/jquery-ui.min.css" rel="stylesheet">

    <!--iCheck-->
    <link href="assets/vendor/icheck/skins/all.css" rel="stylesheet">

    <!--custom styles-->
    <link href="assets/css/main.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="assets/vendor/html5shiv.js"></script>
    <script src="assets/vendor/respond.min.js"></script>
    <![endif]-->
</head>

<body class="fixed-nav top-nav">

    <!--navigation : sidebar & header-->
    <nav class="navbar navbar-expand-lg fixed-top navbar-light" id="mainNav">
        <div class="box-container">
           <!--brand name for responsive-->
           <a class="navbar-brand navbar-brand-responsive" href="#">
               <img class="pr-3 float-left" src="assets/img/logo-icon.png" srcset="assets/img/logo-icon@2x.png 2x" alt=""/>
               <div class="float-left">
                   <div>DashLab</div>
                <span class="page-direction f12 weight300">
                    <span>home</span>
                    <i class="fa fa-angle-right"></i>
                    <span>UI element</span>
                </span>
               </div>
           </a>
           <!--/brand name for responsive-->

            <!--responsive navigation list toggle-->
            <button class="navbar-toggler navigation-list-toggler" type="button" data-toggle="collapse" data-target="#navbarListResponsive" aria-controls="navbarListResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <!--/responsive navigation list toggle-->

            <!--responsive nav notification toggle-->
            <button class="navbar-toggler nav-notification-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span> <i class="vl_ellipsis-fill-v f16"></i></span>
            </button>
            <!--/responsive nav notification toggle-->

            <div class="collapse navbar-collapse" id="navbarResponsive">

                <!--brand name-->
                <a class="navbar-brand navbar-hide-responsive" href="#">
                    <img class="pr-3 float-left" src="assets/img/logo-icon.png" srcset="assets/img/logo-icon@2x.png 2x" alt=""/>
                    <div class="float-left">
                        <div>DashLab</div>
                        <span class="page-direction f12 weight300">
                            <span>home</span>
                            <i class="fa fa-angle-right"></i>
                            <span>UI element</span>
                        </span>
                    </div>
                </a>
                <!--/brand name-->

                <!--header rightside links-->
                <ul class="navbar-nav header-links ml-auto hide-arrow">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle mr-lg-3" id="messagesDropdown" href="#" data-toggle="dropdown"
                           aria-haspopup="true" aria-expanded="false">
                            <i class="vl_chat-bubble"></i>
                            <span class="d-lg-none">Messages
                                <span class="badge badge-pill badge-primary">9 New</span>
                            </span>
                            <div class="notification-alarm">
                                <span class="wave wave-danger"></span>
                                <span class="dot"></span>
                            </div>
                        </a>

                        <div class="dropdown-menu dropdown-menu-right header-right-dropdown-width pb-0" aria-labelledby="messagesDropdown">
                            <h6 class="dropdown-header weight500 ">Messages</h6>
                            <div class="dropdown-divider mb-0"></div>
                            <a class="dropdown-item border-bottom msg-unread" href="#">
                                <div class="float-left notificaton-thumb">
                                    <img class="rounded-circle" src="assets/img/avatar/avatar4.jpg" alt=""/>
                                </div>
                                <span class="weight500">Andrew Flinton</span>
                                <span class="small float-right text-muted">08:30 AM</span>

                                <div class="dropdown-message">
                                    I hope that you will be there in time. See you then
                                </div>
                            </a>

                            <a class="dropdown-item border-bottom msg-unread" href="#">
                                <div class="float-left notificaton-thumb">
                                    <img class="rounded-circle" src="assets/img/avatar/avatar2.jpg" alt=""/>
                                </div>
                                <span class="weight500">John Doe</span>
                                <span class="small float-right text-muted">10:28 AM</span>

                                <div class="dropdown-message">
                                    Hello this is an example message. Just want to show how it looks
                                </div>
                            </a>

                            <a class="dropdown-item border-bottom" href="#">
                                <div class="float-left notificaton-thumb">
                                    <img class="rounded-circle" src="assets/img/avatar/avatar3.jpg" alt=""/>
                                </div>
                                <span class="weight500">Dash Don</span>
                                <span class="small float-right text-muted">07:12 PM</span>

                                <div class="dropdown-message">
                                    Hi, This is Dash Don form usa. I'm looking for someone who really good at design and frontend like mosaddek
                                </div>
                            </a>

                            <a class="dropdown-item border-bottom" href="#">
                                <div class="float-left notificaton-thumb">
                                    <img class="rounded-circle" src="assets/img/avatar/avatar1.jpg" alt=""/>
                                </div>
                                <span class="weight500">dkmosa</span>
                                <span class="small float-right text-muted">12:10 PM</span>

                                <div class="dropdown-message">
                                    We build a beautiful dashboard admin panel for professional
                                </div>
                            </a>
                            <a class="dropdown-item small" href="#">View all messages</a>
                        </div>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle mr-lg-3" id="alertsDropdown" href="#" data-toggle="dropdown"
                           aria-haspopup="true" aria-expanded="false">
                            <i class="vl_bell"></i>
                            <span class="d-lg-none">Notification
                                <span class="badge badge-pill badge-warning">5 New</span>
                            </span>
                            <div class="notification-alarm">
                                <span class="wave wave-warning"></span>
                                <span class="dot bg-warning"></span>
                            </div>
                        </a>

                        <div class="dropdown-menu dropdown-menu-right header-right-dropdown-width pb-0" aria-labelledby="alertsDropdown">
                            <h6 class="dropdown-header weight500">Notification</h6>

                            <div class="dropdown-divider mb-0"></div>
                            <a class="dropdown-item border-bottom" href="#">
                                <span class="text-primary">
                                <span class="weight500">
                                    <i class="vl_bell weight600 pr-2"></i>Weekly Update</span>
                                </span>
                                <span class="small float-right text-muted">03:14 AM</span>

                                <div class="dropdown-message f12">
                                    This week project update report generated. All team members are requested to check the updates
                                </div>
                            </a>

                            <a class="dropdown-item border-bottom" href="#">
                                <span class="text-danger">
                                <span class="weight500">
                                    <i class="vl_Download-circle weight600 pr-2"></i>Server Error</span>
                                </span>
                                <span class="small float-right text-muted">10:34 AM</span>

                                <div class="dropdown-message f12">
                                    Unexpectedly server response stop. Responsible members are requested to fix it soon
                                </div>
                            </a>

                            <a class="dropdown-item border-bottom" href="#">
                                <span class="text-success">
                                <span class="weight500">
                                    <i class="vl_screen weight600 pr-2"></i>Monthly Meeting</span>
                                </span>
                                <span class="small float-right text-muted">12:30 AM</span>

                                <div class="dropdown-message f12">
                                    Our monthly meeting will be held on tomorrow sharp 12:30. All members are requested to attend this meeting.
                                </div>
                            </a>

                            <a class="dropdown-item small" href="#">View all notification</a>
                        </div>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle mr-lg-3" id="userNav" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <div class="user-thumb">
                                <img class="rounded-circle" src="assets/img/avatar/avatar1.jpg" alt=""/>
                            </div>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userNav">
                            <a class="dropdown-item" href="#">My Profile</a>
                            <a class="dropdown-item" href="#">Account Settings</a>
                            <a class="dropdown-item" href="#">Inbox <span class="badge badge-primary">3</span></a>
                            <a class="dropdown-item" href="#">Message <span class="badge badge-success">5</span></a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="login.html">Sign Out</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a href="javascript:;" class="nav-link right_side_toggle">
                            <i class="icon-options-vertical"> </i>
                        </a>
                    </li>
                </ul>
                <!--/header rightside links-->
            </div>
        </div>
    </nav>

    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="box-container">
            <div class="collapse navbar-collapse" id="navbarListResponsive">
                <!--header nav links-->
                <ul class="navbar-nav header-links">
                    <li class="nav-item active">
                        <a class="nav-link mr-lg-3" href="index.html">
                            Dashboard
                        </a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle mr-lg-3" id="actionNav" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Features
                        </a>
                        <div class="dropdown-menu" aria-labelledby="actionNav">
                            <a class="dropdown-item" href="#">Bootstrap 4 Stable</a>
                            <a class="dropdown-item" href="#">DashLab Modern Admin</a>
                            <a class="dropdown-item" href="#">Awesome Widgets Collection</a>
                            <a class="dropdown-item" href="#">Developer Friendly Code</a>
                            <a class="dropdown-item" href="#">SASS and GULP Task</a>
                            <a class="dropdown-item" href="#">Fully Responsive</a>
                            <a class="dropdown-item" href="#">Latest Version Plugins</a>
                        </div>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle mr-lg-3" id="reportNav" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Reports
                        </a>
                        <div class="dropdown-menu" aria-labelledby="reportNav">
                            <a class="dropdown-item" href="#">Daily Reports</a>
                            <a class="dropdown-item" href="#">Weekly Reports</a>
                            <a class="dropdown-item" href="#">Monthly Reports</a>
                            <a class="dropdown-item" href="#">Yearly Reports</a>
                            <a class="dropdown-item" href="#">HR Reports</a>
                            <a class="dropdown-item" href="#">Product Reports</a>
                            <a class="dropdown-item" href="#">Order Reports</a>
                            <a class="dropdown-item" href="#">Revenue Reports</a>
                        </div>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle mr-lg-3" id="orderNav" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Management
                        </a>
                        <div class="dropdown-menu" aria-labelledby="orderNav">
                            <a class="dropdown-item" href="#">HR Management</a>
                            <a class="dropdown-item" href="#">Product Management</a>
                            <a class="dropdown-item" href="#">Role Management</a>
                            <a class="dropdown-item" href="#">Sales Management</a>
                            <a class="dropdown-item" href="#">Employee Management</a>
                        </div>
                    </li>
                </ul>
                <!--/header nav links-->
                <!--header search-->
                <ul class="navbar-nav header-links ml-auto">
                    <li class="nav-item">
                        <form class="search-wrap">
                            <input type="text" class="form-control form-pill search-input" placeholder="Search"/>
                            <i class="fa fa-search"></i>
                        </form>
                    </li>
                </ul>
                <!--/header search-->
            </div>
        </div>
    </nav>
    <!--/navigation : sidebar & header-->

    <div class="box-container">
        <!--main content wrapper-->
        <div class="content-wrapper">

            <div class="container-fluid">

                <!--page title-->
                <div class="page-title mb-4 d-flex align-items-center">
                    <div class="mr-auto">
                        <h4 class="weight500 d-inline-block pr-3 mr-3 border-right">Blank Page</h4>
                        <nav aria-label="breadcrumb" class="d-inline-block ">
                            <ol class="breadcrumb p-0">
                                <li class="breadcrumb-item"><a href="#">Home</a></li>
                                <li class="breadcrumb-item"><a href="#">Extra Pages</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Blank Page</li>
                            </ol>
                        </nav>
                    </div>
                </div>
                <!--/page title-->

                <div class="row">
                    <div class="col-xl-6 col-md-6">
                        <div class="card card-shadow mb-4">
                            <div class="card-header border-0">
                                <div class="custom-title-wrap bar-primary">
                                    <div class="custom-title">Title</div>
                                    <div class="custom-post-title">Card subtitle goes here</div>
                                </div>
                            </div>
                            <div class="card-body">
                                body
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-6 col-md-6">
                        <div class="card card-shadow mb-4">
                            <div class="card-header border-0">
                                <div class="custom-title-wrap bar-warning">
                                    <div class="custom-title">Title</div>
                                    <div class="custom-post-title">Card subtitle goes here</div>
                                </div>
                            </div>
                            <div class="card-body">
                                body
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--/main content wrapper-->
    </div>

    <!--footer-->
    <footer class="sticky-footer">
        <div class="container">
            <div class="text-center">
                <small>Copyright &copy; VectorLab 2018  <a href="http://www.dmaku.com/moban.html" target="_blank">网页模板</a></small>
            </div>
        </div>
    </footer>
    <!--/footer-->

    <!--right sidebar-->
    <div class="right-sidebar" id="right_side_bar">
        <div class="card border-0">
            <div class="card-body pb-0">
                <!--close toggle-->
                <a href="javascript:;" class="right_side_toggle float-right close-sidebar-icon">
                    <i class=" ti-shift-right"> </i>
                </a>
                <!--/close toggle-->
            </div>
            <div class="card-body pt-2">

                <div class="right-widget">
                    <div class="custom-title-wrap bar-primary mb-4">
                        <div class="custom-title">Today's Activity</div>
                    </div>

                    <ul class="list-unstyled base-timeline">
                        <li class="time-dot-primary">
                            <div class="base-timeline-info">
                                <a href="#">John123</a> Successfully purchased item#26
                            </div>
                            <small class="text-muted">
                                28 mins ago
                            </small>
                        </li>
                        <li class="time-dot-danger">
                            <div class="base-timeline-info">
                                <a href="#" class="text-danger">Farnandez</a> placed the order for accessories
                            </div>
                            <small class="text-muted">
                                2 days ago
                            </small>
                        </li>
                        <li class="time-dot-purple">
                            <div class="base-timeline-info">
                                User <a href="#" class="text-purple">Lisa Maria</a> checked out from the market
                            </div>
                            <small class="text-muted">
                                12 mins ago
                            </small>
                        </li>
                    </ul>
                </div>

                <div class="right-widget">
                    <div class="custom-title-wrap bar-danger mb-4">
                        <div class="custom-title">Active Users</div>
                    </div>

                    <ul class="list-unstyled mb-0 list-widget">
                        <li class="cursor">
                            <div class="media mb-4">
                                <div class="st-alphabet mr-3">
                                    <img class="rounded-circle" src="assets/img/avatar/avatar1.jpg" alt=" ">
                                    <span class="status bg-success"></span>
                                </div>
                                <div class="media-body ">
                                    <div class="float-left">
                                        <h6 class="text-uppercase mb-0">shirley hoe</h6>
                                        <span class="text-muted">Online</span>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="cursor">
                            <div class="media mb-4">
                                <div class="st-alphabet mr-3">
                                    <img class="rounded-circle" src="assets/img/avatar/avatar2.jpg" alt=" ">
                                    <span class="status bg-warning"></span>
                                </div>
                                <div class="media-body ">
                                    <div class="float-left">
                                        <h6 class="text-uppercase mb-0">james alexender</h6>
                                        <span class="text-muted">Screaming...</span>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="cursor">
                            <div class="media mb-4">
                                <div class="st-alphabet mr-3">
                                    <img class="rounded-circle" src="assets/img/avatar/avatar3.jpg" alt=" ">
                                    <span class="status bg-info"></span>
                                </div>
                                <div class="media-body">
                                    <div class="float-left">
                                        <h6 class="text-uppercase mb-0">ursula sitorus</h6>
                                        <span class="text-muted">Start Exploring</span>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="cursor">
                            <div class="media mb-3">
                                <div class="st-alphabet mr-3">
                                    <img class="rounded-circle" src="assets/img/avatar/avatar4.jpg" alt=" ">
                                    <span class="status bg-danger"></span>
                                </div>
                                <div class="media-body">
                                    <div class="float-left">
                                        <h6 class="text-uppercase mb-0">jonna pinedda</h6>
                                        <span class="text-muted">Busy</span>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>

                <div class="right-widget">

                    <div class="custom-title-wrap bar-success mb-4">
                        <div class="custom-title">Notification</div>
                    </div>

                    <div >
                        <div class="dropdown-divider mb-0"></div>
                        <a class="nav-link border-bottom px-0 py-3" href="#">
                            <span class="text-primary">
                            <span class="weight700 f12">
                                <i class="vl_bell weight600 pr-2"></i>Weekly Update</span>
                            </span>
                            <span class="small float-right text-muted">03:14 AM</span>

                            <div class="text-dark f12">
                                This week project update report generated. All team members are requested to check the updates
                            </div>
                        </a>

                        <a class="nav-link border-bottom px-0 py-3" href="#">
                            <span class="text-danger">
                            <span class="weight700 f12">
                                <i class="vl_Download-circle weight600 pr-2"></i>Server Error</span>
                            </span>
                            <span class="small float-right text-muted">10:34 AM</span>

                            <div class="text-dark f12">
                                Unexpectedly server response stop. Responsible members are requested to fix it soon
                            </div>
                        </a>

                        <a class="nav-link border-bottom px-0 py-3" href="#">
                            <span class="text-success">
                            <span class="weight700 f12">
                                <i class="vl_screen weight600 pr-2"></i>Monthly Meeting</span>
                            </span>
                            <span class="small float-right text-muted">12:30 AM</span>

                            <div class="text-dark f12">
                                Our monthly meeting will be held on tomorrow sharp 12:30. All members are requested to attend this meeting.
                            </div>
                        </a>

                        <div class="text-center mt-3">
                            <a class="nav-link px-0" href="#">View all notification</a>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
    <!--/right sidebar-->

    <!--basic scripts-->
    <script src="assets/vendor/jquery/jquery.min.js"></script>
    <script src="assets/vendor/jquery-ui/jquery-ui.min.js"></script>
    <script src="assets/vendor/popper.min.js"></script>
    <script src="assets/vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/vendor/jquery-dropdown-master/jquery.dropdown.js"></script>
    <script src="assets/vendor/m-custom-scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="assets/vendor/icheck/skins/icheck.min.js"></script>

    <!--[if lt IE 9]>
    <script src="assets/vendor/modernizr.js"></script>
    <![endif]-->

    <!--basic scripts initialization-->
    <script src="assets/js/scripts.js"></script>
</body>
</html>

